<script setup lang="ts">

import Aside from "./aside.vue";
import {ref} from "vue";
import Hander from "./hander.vue";
import {UserInfo} from "../../service/user.ts";
import {onMounted} from "vue";
import { userInfoStore } from "../../store";
const store = userInfoStore();


const isCollapse = ref(false);

const handelIsCollapse = (newStatus: boolean) => {
  isCollapse.value = newStatus;
}
onMounted(async () => {
  const {data} = await UserInfo()
  console.log(data)
  store.setUser(data)
})

</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-header style="height: 10vh;">
        <Hander @update-status="handelIsCollapse"/>
      </el-header>
      <el-container>
        <el-aside :width="isCollapse?'70px':'250px'">
          <Aside :status="isCollapse"/>
        </el-aside>
        <el-main style="height: 90vh;background: aliceblue;">

          <RouterView></RouterView>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>


<style scoped>
.common-layout {
  width: 100vw;
  height: 100vh;
  background: #99d5ff;
}
</style>